<template>
	<view>
		<view class="bg">
			<view class="masking" />
			<image style="width: 750rpx;" src="./static/bg.png" mode="widthFix"></image>
		</view>
		<view class="others-box">
		</view>
		<view class="title-box">
			<image style="width: 516rpx;" src="./static/title.png" mode="widthFix"></image>
		</view>
		<view class="group-box">
			<view class="group">
				<image style="width: 106rpx;" src="./static/icon_1.png" mode="widthFix"></image>
				<view class="group__text">
					<view class="group__text__title">开启成长等级</view>
					<view class="group__text__subtitle">等级越高，所获分成越多</view>
				</view>
			</view>
			<view class="group">
				<view>
					<image style="width: 106rpx;padding-top: 12rpx;" src="./static/icon_2.png" mode="widthFix"></image>
				</view>
				<view class="group__text">
					<view class="group__text__title">开启多样下级</view>
					<view class="group__text__subtitle">用户开通店铺储蓄后，享受更高的分佣提成</view>
				</view>
			</view>
			<view class="group">
				<view>
					<image style="width: 106rpx;padding-top: 12rpx;" src="./static/icon_2.png" mode="widthFix"></image>
				</view>
				<view class="group__text">
					<view class="group__text__title">特权服务</view>
					<view class="group__text__subtitle">平台提供专业的一对一服务，为您解决各种平台所遇问题</view>
				</view>
			</view>
		</view>
		<view class="btn-group-box">
			<view class="btn-group-flex-box">
				<view class="btn-group" hover-class="hoverClass" hover-stay-time="150"
					:class="[{'center-margin': index === 1},{'current-bgc': current === index}]"
					v-for="(item, index) in vipGroup">
					<view class="btn-group__title">{{item.name}}</view>
					<view class="btn-group__price" :class="[{'center-margin__price': current === index}]">{{item.price}}
					</view>
					<view class="btn-group__img-box" v-if="index === 1">
						限时折扣
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" hover-class="hoverClass" hover-stay-time="150" @tap="submit()">
				立即开通
			</view>
		</view>
		<view class="agreement-box">
			<view class="agreement-box__btn">
				<view hover-class="hoverClass" hover-stay-time="150">隐私政策</view>
				<view hover-class="hoverClass" hover-stay-time="150" class="agreement-box__center-margin">服务条款</view>
				<view hover-class="hoverClass" hover-stay-time="150">在线客服</view>
			</view>
			<view class="agreement-box__describe">
				专业分销商解释语句专业分销商解释语句专业分销商解释语句专业分销商解释语句专
				业分销商解释语句专业分销商解释语句专业分销商解释语句业分销商解释语句
				专业分销商解释语句专业分销商解释语句专业分销商解释语句业
				分销商解释语句专业分销商解释语句专业分销商解释语句专业分销商解释语句
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import wxPay from '@/common/mixins/wxPay.js';
	export default {
		data() {
			return {
				vipGroup: [{
					name: '曾经的价',
					price: 48
				}, {
					name: '现在的价',
					price: 19.9
				}, {
					name: '未来的价',
					price: 68
				}],
				current: 1
			}
		},
		onLoad() {
			this.getInfoSpecialityDistributionMoney();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		// 混入微信支付
		mixins: [wxPay],
		methods: {
			// 充值
			async submit() {
				const data = {
					id: this.userInfo.id,
					specialityDistributionMoney: this.vipGroup[this.current].price
				}
				const outTradeNoInfo =  await this.$u.api.becomeUserInfoSpecialityDistribution({...data});
				const outTradeNo = outTradeNoInfo.data;
				// 升级分销商的额外值
				const attach = {
					userId: this.userInfo.id,
					specialityDistributionMoney: this.vipGroup[this.current].price
				};
				this.entPay(outTradeNo, this.vipGroup[this.current].price, 2, {...attach});
			},
			// 获取分销商金额
			async getInfoSpecialityDistributionMoney() {
				const data = await this.$u.api.getInfoSpecialityDistributionMoney();
				this.vipGroup[1].price = data.data;
			},
			// 切换套餐
			change(index) {
				// this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 812rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #30323F;
		// 计算顶部安全区域
		padding-top: var(--status-bar-height);
		padding-top: env(safe-area-inset-top);
		z-index: -1;

		.masking {
			background-color: rgba($color: #30323F, $alpha: .2);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: inherit;
			z-index: 2;
		}
	}

	.title-box {
		padding-top: 142rpx;
		padding-left: 36rpx;
	}

	.group-box {
		display: flex;
		flex-direction: column;
		align-items: center;

		.group {
			width: 690rpx;
			height: 194rpx;
			border: 2rpx solid rgba($color: #51535d, $alpha: 1);
			color: #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			padding-left: 30rpx;

			&__text {
				margin-left: 8rpx;

				&__title {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 12rpx;
				}

				&__subtitle {
					font-size: 24rpx;
					color: #8186a0;
				}
			}
		}
	}

	.btn-group-box {
		display: flex;
		justify-content: center;
		color: #fff;
		margin-top: 30rpx;

		.btn-group-flex-box {
			display: flex;

			.btn-group {
				width: 200rpx;
				height: 218rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid rgba($color: #FAFAFA, $alpha: .2);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				position: relative;

				&__title {
					font-size: 38rpx;
				}

				&__price {
					font-size: 60rpx;

					&::before {
						content: '￥';
						font-size: 30rpx;
						font-weight: bold;
						color: #FAFAFA;
					}
				}

				&__img-box {
					position: absolute;
					bottom: 6rpx;
					left: 0;
					background-image: url('./static/bg-.png');
					background-size: cover;
					width: 206rpx;
					height: 48rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
				}
			}

			.center-margin {
				margin: 0 26rpx;


				&__price {
					font-size: 60rpx;
					color: #EB752E;

					&::before {
						content: '￥';
						font-size: 30rpx;
						font-weight: bold;
						color: #EB752E;
					}
				}
			}

			.current-bgc {
				background-image: url('./static/bg-vip.png');
				background-size: cover;
				color: #613E28;
			}
		}

	}

	.others-box {
		position: fixed;
		width: 100%;
		top: 812rpx;
		left: 0;
		height: calc(100vh - 632rpx);
		background-color: #30323F;
		z-index: -1;
	}

	.btn-box {
		margin: 40rpx 0;
		display: flex;
		justify-content: center;

		.btn {
			width: 644rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FFF4E5 0%, #D7A26A 100%);
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16), inset 0rpx -4rpx 0rpx 2rpx #D7A26A;
			border-radius: 92rpx 92rpx 92rpx 92rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
			color: #30323F;
			font-weight: bold;
		}
	}

	.agreement-box {
		&__btn {
			display: flex;
			justify-content: center;
			color: #fff;
		}

		&__center-margin {
			margin: 0 50rpx;
		}

		&__describe {
			width: 100%;
			padding: 0 30rpx;
			margin-top: 16rpx;
			padding-bottom: 86rpx;
			font-size: 18rpx;
			font-weight: 400;
			color: #8186a0;
			text-align: center;
		}
	}


	.hoverClass {
		opacity: .7;
	}
</style>